<template>
	<view>
		<!-- 订单页 -->
    <view class="order_list">
      <view class="order_item" v-for="item in orders" :key="item.order_id">
        <view class="order_item_line">
          <text>订单编号</text>
          <text>{{item.order_number}}</text>
        </view>
        <view class="order_item_line">
          <text>订单金额</text>
          <text class="price">{{item.order_price}}</text>
        </view>
        <view class="order_item_line">
          <text>订单日期</text>
          <text>{{item.create_time_format}}</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 订单列表
				orders:[ ],
			}
		},
		onLoad() {
      // this.getOrder();  // 旧版写法
      this.getOrder3();    // 新版写法
		},
		methods: {
      // 获取订单历史 - 新版写法
      async getOrder3(){
        // const token = uni.getStorageSync('token')
        const res = await this.$request({
          method:'GET',
          url:'/my/orders/all',
          data:{
            type: 1
          }
        })
        // console.log(res);
        const { orders } = res;
        orders.forEach(item=>{
          // 给每个订单添加一个额外的属性
          item.create_time_format = new Date(item.create_time * 1000).toLocaleString();
        })
        this.orders = orders;
      },
      
      // 获取订单历史 - 旧版写法
      async getOrder(){
        const token = uni.getStorageSync('token')
        const res = await uni.request({
          method:'GET',
          url:'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all',
          header:{
            Authorization: token
          },
          data:{
            type: 1
          }
        })
        // console.log(res);
        const { orders } = res[1].data.message;
        orders.forEach(item=>{
          // 给每个订单添加一个额外的属性
          item.create_time_format = new Date(item.create_time * 1000).toLocaleString();
        })
        this.orders = orders;
      }
		}
	}
</script>

<style lang="less">
  page{
    background-color: #f9f9f9;
  }
	.order_item{
    background-color: #fff;
    margin-bottom: 20rpx;
      padding: 20rpx;
    &_line{
      height: 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .price{
      color:var(--mainColor);
    }
  }
</style>
